<script setup lang="ts">
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import RightContent from '@/views/DigitalTwin/right/rightContent.vue';
  import { ElButton } from 'element-plus';
  import { EventTypeEnum } from '/@/core/communication/EventTypeEnum';
  import FrontMessage from '/@/core/communication/FrontMessage';
  import { ReceiveMessageType } from '/@/config/DeclareGlobal';
  import receiveMessage from '/@/core/communication/ReceiveMessage';
  // 当前选中的顶部标签索引
  const selectedTopLabelIndex = ref(1);
  const firstButtonLabel = ref('场景');
  const showSceneComponent = ref(true);
  const showBasicComponent = ref(false);
  const topLabels = [
    {
      label: '基础',
      component: 'basicComponent',
    },
    {
      label: '场景',
      component: 'sceneComponent',
    },
    // {
    //   label: '动画',
    //   component: 'animationComponent',
    // },
    {
      label: '数据',
      component: 'dataComponent',
    },
    {
      label: '状态',
      component: 'stateComponent',
    },
  ];
  // 根据选中顶部标签计算要显示的子菜单项
  const currentComponent = computed(() => {
    return topLabels[selectedTopLabelIndex.value]?.component;
  });
  // 选择顶部标签的方法
  const selectTopLabel = (index: number) => {
    selectedTopLabelIndex.value = index;
  };

  const toggleBasicComponent = () => {
    firstButtonLabel.value = '基础';
    selectedTopLabelIndex.value = 0;
    showBasicComponent.value = true;
    showSceneComponent.value = false;
  };

  const toggleSceneComponent = () => {
    firstButtonLabel.value = '场景';
    selectedTopLabelIndex.value = 1;
    showBasicComponent.value = false;
    showSceneComponent.value = true;
  };

  // 在 mounted 时监听事件总线的事件
  onMounted(() => {
    receiveMessage.addListener(ReceiveMessageType.SelectedType, (e) => {
      if (e.data === EventTypeEnum.Component) {
        toggleBasicComponent();
      } else if (e.data === EventTypeEnum.Scene) {
        toggleSceneComponent();
      }
    });
    // FrontMessage.addListener(EventTypeEnum.Component, toggleBasicComponent);
    // FrontMessage.addListener(EventTypeEnum.Scene, toggleSceneComponent);
  });

  // 在 unmounted 时移除事件监听
  onUnmounted(() => {
    // eventBus.off('toggleBasicComponent', toggleBasicComponent);
    // eventBus.off('toggleSceneComponent', toggleSceneComponent);
  });
  /*const currentComponent = computed(() => {
if (currentSubItems.value && currentSubItems.value.length > selectedSubItemIndex.value) {
return currentSubItems.value[selectedSubItemIndex.value].component;
}
return 'No Content Available';
});*/
</script>
<template>
  <div class="left-layout">
    <!-- Top buttons -->
    <header class="header">
      <!-- 基础按钮 -->
      <el-button
        :key="0"
        v-if="showBasicComponent"
        @click="selectTopLabel(0)"
        :class="{ 'is-active': selectedTopLabelIndex === 0 }"
        class="nav-button"
      >
        <span class="span">{{ firstButtonLabel }}</span>
      </el-button>

      <!-- 场景按钮 -->
      <el-button
        :key="1"
        v-if="showSceneComponent"
        @click="selectTopLabel(1)"
        :class="{ 'is-active': selectedTopLabelIndex === 1 }"
        class="nav-button"
      >
        <span class="span">{{ firstButtonLabel }}</span>
      </el-button>
      <el-button
        v-for="(label, index) in topLabels.filter(
          (item) => item.label !== '基础' && item.label !== '场景',
        )"
        :key="index + 2"
        @click="selectTopLabel(index + 2)"
        :class="{ 'is-active': selectedTopLabelIndex === index + 2 }"
        class="nav-button"
      >
        <span class="span">{{ label.label }}</span>
      </el-button>
    </header>

    <!-- Left menu and content -->
    <div class="content-container">
      <right-content :current-component="currentComponent" />
    </div>
  </div>
</template>
<style scoped>
  .header {
    flex-shrink: 0;
    width: 18vw;
    height: 5vh;
    background-color: #1e2430;
    position: fixed;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: flex-start; /* 水平从左到右排列 */
  }
  .header :deep(.el-button) {
    font-size: 1vw;
    width: 3vw;
    height: 4vh;
    background: transparent;
    border: none;
    color: #ffffff;
    margin-left: 0.5vw;
  }
  .content-container {
    display: flex;
  }
  :deep(.el-button) {
    font-size: 0.8vw;
    width: 6vw;
    height: 5vh;
    margin-left: 0.8vw;
    background: transparent;
    border: none;
    color: #ffffff;
  }

  :deep(.el-button):hover {
    color: white !important;
    background-color: #4583ff;
  }
  :deep(.el-button.is-active) {
    color: #ffffff !important;
    background: #4583ff;
  }
</style>
